@mixin flex-align-center {
  display: flex;
  align-items: center;
}
.momentCard {
  margin-top: 32px;
  display: flex;
  .left {
    margin-right: 12px;
    .avatar {
      border-radius: 6px;
    }
  }

  .main {
    flex: 1;
    // border: 1px solid pink;

    .name {
      color: var(--username-color);
      font-weight: 600;
    }

    .content {
      margin-top: 6px;
      font-size: 14px;
    }

    .imgList {
      display: flex;
      flex-wrap: wrap;

      .imgItem {
        flex: 1;
        margin: 12px 6px 0 0;

        :global {

          .semi-avatar {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .btnGroupWrapper {
      @include flex-align-center;
      justify-content: space-between;
      margin-top: 20px;

      .createAt {
        font-size: 12px;
        color: var(--text-color2);
      }

      .btnGroup {
        flex: 1;
        @include flex-align-center;
        justify-content: flex-end;

        .like {
          color: var(--semi-color-primary);
        }

        .likeBtn {

          :hover {
            // color: var(--semi-color-primary);
            transform: translateY(-10%);
          }

          :active {
            transform: translateY(20%);
          }
        }

        :global {

          .semi-icon {
            margin-left: 32px;
            cursor: pointer;
          }
        }
      }
    }
    .commentList {
      background-color: #f7f7f7;
    }
  }
}

.momentCard:first-of-type {
  margin-top: 0;
}
